<template>
  <!-- 联系客服 -->
  <u-overlay :show="show" @click="closeHandle">
    <view class="flex-center" style="height: 100%;">
      <view class="service-content" @tap.stop>
        <text style="font-size: 15px;font-weight: 500;">联系客服</text>
        <image style="width: 175px;weight:175px;margin: 15px 0 10px 0;" :src="data.serverInfo.QRCode" mode="" :show-menu-by-longpress="true">
        </image>
        <text style="font-size: 12px;">扫码添加客服微信</text>
        <text style="margin: 10px 0 20px 0;font-size: 12px;">客服电话：{{data.serverInfo.mobile}}</text>
        <u-button @click="closeHandle" shape='circle' :customStyle="{width: '132px',height: '40px',}" type="primary" text="确定">
        </u-button>
      </view>
    </view>
  </u-overlay>
</template>

<script setup>
import { ref, reactive, defineProps, defineExpose } from "vue";
import serverQRCode from "@/static/image/mine/server.png"
const props = defineProps({})
const show = ref(false)
const data = reactive({
  serverInfo: {
    QRCode: serverQRCode,
    mobile: '4009669993'
  }
})
defineExpose({
  show
})
const closeHandle = () => {
  show.value = false
}

</script>

<style scoped>
.service-content {
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  padding: 20px;
  color: #333333;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 345px;
  height: 360px;
  background: #FFFFFF;
  border-radius: 8px
}

</style>
